<!-- 重点参数：containerClassNames -->
<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/overlay/SimpleMarker/examples/pure-color.html -->
    <!--<base href="//webapi.amap.com/ui/1.0/ui/overlay/SimpleMarker/examples/" />-->
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>纯色背景</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        .amap-marker-label {
            font-size: 13px;
            border: 1px solid orange;
            background: #fff;
            border-radius: 10px 0 0 0;
            color: #690441;
        }

        .color_bar {
            width: 30px;
            height: 18px;
        }
        /**
         * 替换内置样式的图片
         */

        .amap-simple-marker-def-style.my_color .amap-simple-marker-icon {
            background-image: url('../images/mbg_v2-fs8.png');
        }

        @media (min--moz-device-pixel-ratio: 1.5),
        (-o-min-device-pixel-ratio: 3/2),
        (-webkit-min-device-pixel-ratio: 1.5),
        (min-device-pixel-ratio: 1.5),
        (min-resolution: 1.5dppx) {
            .amap-simple-marker-def-style.my_color .amap-simple-marker-icon {
                background-image: url('../images/mbg_v2@2x-fs8.png');
            }
        }
    </style>
</head>

<body>
<div id="container"></div>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.3&key=b47a8a32ba9322448a427cf1f02a59f1'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<script type="text/javascript">
  //创建地图
  var map = new AMap.Map('container', {
    zoom: 4
  });

  AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
    var iconStyles = SimpleMarker.getBuiltInIconStyles();//内置的样式

    if (typeof(console) !== 'undefined') {
      console.log("内置的样式:"+iconStyles.join(', '));
      //red, orange, green, blue, orchid, darkred, darkblue, darkgreen, purple, cadetblue, salmon, beige, lightgreen, lightblue, pink, lightpink, white, lightgray, gray, black
    }

    //获取一批grid排布的经纬度
    var lngLats = getGridLngLats(map.getCenter(), 5, iconStyles.length, 130, 70);

    for (var i = 0, len = lngLats.length; i < len; i++) {
      new SimpleMarker({
        //添加自定义的class
        containerClassNames: 'my_color',
        //使用内置的iconStyle
        iconStyle: iconStyles[i],

        //图标文字
        iconLabel: {
          //A,B,C.....
          innerHTML: String.fromCharCode('A'.charCodeAt(0) + i),
          style: {
            //颜色, #333, red等等，这里仅作示例，取iconStyle中首尾相对的颜色
            color: iconStyles[len - 1 - i]
          }
        },

        //显示定位点
        //showPositionPoint:true,

        map: map,
        position: lngLats[i],
        title: 'iconStyle: ' + iconStyles[i] + '_' + iconStyles[len - 1 - i],

        //Marker的label,见http://lbs.amap.com/api/javascript-api/reference/overlay/#Marker
        label: {
          content: iconStyles[i] + '<div class="color_bar" style="background:' + iconStyles[i] + '"></div>',
          offset: new AMap.Pixel(27, 25)
        }
      });
    }

  });


  /**
   * 返回一批网格排列的经纬度

   * @param  {AMap.LngLat} center 网格中心
   * @param  {number} colNum 列数
   * @param  {number} size  总数
   * @param  {number} cellX  横向间距
   * @param  {number} cellY  竖向间距
   * @return {Array}  返回经纬度数组
   */
  function getGridLngLats(center, colNum, size, cellX, cellY) {
    var pxCenter = map.lnglatToPixel(center);
    var rowNum = Math.ceil(size / colNum);
    var startX = pxCenter.getX(),
        startY = pxCenter.getY();
    cellX = cellX || 70;
    cellY = cellY || 70;

    var lngLats = [];
    for (var r = 0; r < rowNum; r++) {
      for (var c = 0; c < colNum; c++) {
        var x = startX + (c - (colNum - 1) / 2) * (cellX);
        var y = startY + (r - (rowNum - 1) / 2) * (cellY);
        lngLats.push(map.pixelToLngLat(new AMap.Pixel(x, y)));
        if (lngLats.length >= size) {
          break;
        }
      }
    }
    return lngLats;
  }
</script>
</body>

</html>